<template lang="pug">
  .static-compare-view
    .label(:style="{color: labelColor}") {{ itemData.label }}
    .value.f-number(:style="{color: valueColor}" :class="[`fs-${valueSize}`]")
    
    .production(v-if="!!itemData.area")
      .production-label {{ itemData.area.label }}
      .production-value.f-number {{ Math.abs(Number(itemData.area.value)) }}万亩
    .production(v-if="!!itemData.production")   
      .production-label {{ itemData.production.label }}
      .production-value.f-number {{ Math.abs(Number(itemData.production.value)) }}万吨
    
</template>
    
<script>
export default {
  name: "StaticCompareView",
  props: {
    itemData: {
      type: Object,
      default() {
        return {
          label: '',
          value: '',
          area: {
            label: '',
            value: '',
          },
          production: {
            label: '',
            value: '',
          }
        }
      }
    },
    labelColor: {
      type: String,
      default: '#FFFFFF'
    },
    valueColor: {
      type: String,
      default: '#FFFFFF'
    },
    valueSize: {
      type: Number,
      default: 50,
    },
    suffix: String
  },
}
</script>

<style lang="scss" scoped>
.static-compare-view{
  .label,
  .value{
    font-weight: bold;
    margin-bottom: rem(14);
  }
  .label{
    @include fontSie(20);
    color: $base_label_color;
  }
  .value{
    color: #FFFFFF;
    // &.fs-30{
    //   @include fontSie(40);
    // }
    // &.fs-40{
    //   @include fontSie(40);
    // }
    // &.fs-50{
    //   @include fontSie(50);
    // }
    .suffix{
      font-size: .6em;
    }
  }
  .area{
    display: flex;
    align-items: center;
    .area-label,
    .area-value{
      font-weight: bold;
      @include fontSie(16);
    }
    .area-label{
      color: $base_label_color;
      margin-right: rem(6);
    }
    .area-value{
      color: #05FDBB;
      &.up {
        &:before{
          content: '+';
        }
      }
      &.down {
        &:before{
          content: '-';
        }
      }
    }
    

    .area-angle{
      margin-left: rem(6);
      @include square(0);
      border-right: rem(5) solid transparent;
      border-left: rem(5) solid transparent;
      &.up{
        border-bottom: rem(8) solid #05FDBB;
      }
      &.down{
        border-top: rem(8) solid #05FDBB;
      }
    }
  }
  
  .production{
    display: flex;
    align-items: center;
	
    .production-label,
    .production-value{
      font-weight: bold;
      @include fontSie(16);
	  line-height: rem(32);
    }
    .production-label{
      color: $base_label_color;
      margin-right: rem(6);
    }
    .production-value{
      color: #05FDBB;
      &.up {
        &:before{
          content: '+';
        }
      }
      &.down {
        &:before{
          content: '-';
        }
      }
    }
    
  
    .production-angle{
      margin-left: rem(6);
      @include square(0);
      border-right: rem(5) solid transparent;
      border-left: rem(5) solid transparent;
      &.up{
        border-bottom: rem(8) solid #05FDBB;
      }
      &.down{
        border-top: rem(8) solid #05FDBB;
      }
    }
  }
}

</style>
